<template>
	<view>
		<uni-section  padding >
			<view style="font-size: 50rpx;text-align: center;font-weight: bold;">业主审核</view>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						小区名称
					</view>
					<view class="uni-list-cell-db">
						<picker mode="selector" class="custom-input" @change="communityChange" :value="communityIndex"
							:range="communitys" range-key="communityName">
							<view class="uni-input">{{communitys[communityIndex].communityName }}</view>
						</picker>
					</view>
				</view>

				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						楼栋名称
					</view>
					<view class="uni-list-cell-db">
						<picker mode="selector" class="custom-input" @change="builidingChange" :value="builidingIndex"
							:range="builidings" range-key="buildingName">
							<view class="uni-input">{{builidings[builidingIndex].buildingName }}</view>
						</picker>
					</view>
				</view>

				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						单元名称
					</view>
					<view class="uni-list-cell-db">
						<picker mode="selector" class="custom-input" @change="unitChange" :value="unitIndex"
							:range="units" range-key="unitName">
							<view class="uni-input">{{units[unitIndex].unitName }}</view>
						</picker>
					</view>
				</view>

				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						房间名称
					</view>
					<view class="uni-list-cell-db">
						<picker mode="selector" class="custom-input" @change="roomChange" :value="roomIndex"
							:range="rooms" range-key="roomName">
							<view class="uni-input">{{rooms[roomIndex].roomName }}</view>
						</picker>
					</view>
				</view>

				<view class="container">
					<view class="uni-list-cell-left">
						选择类型
					</view>
					<view>
						<picker class="select-box" @change="typeChange" :value="indexedType" mode="selector"
							:range="ownerTypes" range-key="typeName">
							<view class="uni-input custom-input">{{ownerTypes[indexedType].typeName}}</view>
						</picker>
					</view>
				</view>
				<view class="btn">
					<button @click="save" class="bnt" type="primary" plain="true">提交</button>
				</view>
			</uni-forms>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				communitys: [],
				communityIndex: "",
				communityIdList: "",
				communityId: "",

				builidings: [],
				builidingIndex: "",
				builidingIdList: "",
				builidingId: "",

				ownerTypes: [{
						ownerType: "yz",
						typeName: "业主"
					},
					{
						ownerType: "zh",
						typeName: "租户"
					}
				],
				indexedType: 0,

				units: [],
				unitIndex: "",
				unitIdList: "",
				unitId: "",

				rooms: [],
				roomIndex: "",
				roomIdList: "",
				roomId: "",

				ownerRoom: {
					communityId: "",
					buildingId: "",
					unitId: "",
					roomId: "",
					ownerType: "",
				}
			}
		},
		methods: {
			/**
			 * 小区的列表集合
			 */
			community() {
				var communityArr = [];
				var communityIdArr = [];
				uni.request({
					url: "communities",
					data: {},
					method: "GET",
					success: (res) => {
						for (var i = 0; i < res.data.data.length; i++) {
							communityIdArr.push(res.data.data[i].communityId);
							communityArr.push({
								communityName: res.data.data[i].communityName,
								communityId: res.data.data[i].communityId,
							});
						}
						this.communitys = communityArr;
						this.communityIdList = communityIdArr;

						this.communityIndex = 0;
						this.communityChange({
							detail: {
								value: this.communityIndex
							}
						})

					},
				})
			},
			typeChange(e) {
				this.indexedType = e.detail.value;
				const selectedType = this.ownerTypes[this.indexedType];
				this.ownerRoom.ownerType = selectedType.ownerType;
				console.log(this.ownerRoom.ownerType)
			},
			communityChange(e) {
				var builidingArr = [];
				var builidingIdArr = [];
				console.log(e)
				this.communityIndex = e.detail.value;
				const selectedCommunity = this.communitys[this.communityIndex];
				this.communityId = selectedCommunity.communityId;
				console.log(this.communityId);
				/**
				 * 根据获取到的小区id查询当前小区的楼栋信息
				 */
				uni.request({
					url: 'communityByBuilding?id=' + this.communityId,
					data: "",
					method: 'GET',
					success: (res) => {
						this.builidings = res.data.data;
						console.log(this.builidings)

						for (var i = 0; i < res.data.data.length; i++) {
							builidingIdArr.push(res.data.data[i].buildingId);
							builidingArr.push({
								buildingName: res.data.data[i].buildingName,
								buildingId: res.data.data[i].buildingId,
							});
						}
						this.builidings = builidingArr;
						this.builidingIdList = builidingIdArr;

						this.builidingIndex = 0;
						this.builidingChange({
							detail: {
								value: this.builidingIndex
							}
						})

					}
				})
			},
			builidingChange(e) {
				var unitArr = [];
				var unitIdArr = [];
				this.builidingIndex = e.detail.value;
				const selectedBuiliding = this.builidings[this.builidingIndex];
				this.builidingId = selectedBuiliding.buildingId;
				console.log(this.builidingId);
				uni.request({
					url: "buildingByUnit?id=" + this.builidingId,
					data: "",
					method: "GET",
					success: (res) => {
						console.log(res.data.data);

						for (var i = 0; i < res.data.data.length; i++) {
							unitIdArr.push(res.data.data[i].unitId);
							unitArr.push({
								unitName: res.data.data[i].unitName,
								unitId: res.data.data[i].unitId,
							});
						}
						this.units = unitArr;
						this.unitIdList = unitIdArr;

						this.unitIndex = 0;
						this.unitChange({
							detail: {
								value: this.unitIndex
							}
						})

					}
				})
			},
			unitChange(e) {
				var roomArr = [];
				var roomIdArr = [];
				this.unitIndex = e.detail.value;
				const selectedUnit = this.units[this.unitIndex];
				this.unitId = selectedUnit.unitId;
				console.log(this.unitId);
				uni.request({
					url: "unitByRoom?id=" + this.unitId,
					data: "",
					method: "GET",
					success: (res) => {
						for (var i = 0; i < res.data.data.length; i++) {
							roomIdArr.push(res.data.data[i].roomId);
							roomArr.push({
								roomName: res.data.data[i].roomName,
								roomId: res.data.data[i].roomId,
							});
						}
						this.rooms = roomArr;
						this.roomIdList = roomIdArr;

						this.roomIndex = 0;
						this.roomChange({
							detail: {
								value: this.roomIndex
							}
						})
					}
				})
			},
			roomChange(e) {
				this.roomIndex = e.detail.value;
				const selectedRoom = this.rooms[this.roomIndex];
				this.roomId = selectedRoom.roomId;
				console.log(this.roomId);
			},
			save() {
				this.ownerRoom.communityId = this.communityId
				this.ownerRoom.buildingId = this.builidingId
				this.ownerRoom.unitId = this.unitId
				this.ownerRoom.roomId = this.roomId
				uni.request({
					url: "ownerRoom",
					data: this.ownerRoom,
					method: "POST",
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000,
								complete: () =>{
									// 提交成功后的回调函数，可以在这里进行其他操作
									uni.navigateTo({
										url: '/pages/list/list'
									});
								}
							});
						} else {
							uni.showToast({
								title: '提交失败，请重试',
								icon: 'none',
								duration: 2000
							});
						}
					}
				})

			}

		},
		mounted() {
			this.community();
		}
	}
</script>

<style>
	.custom-input {
		border: 1px solid #000;
		/* 添加边框样式 */
		padding: 5px;
		/* 可选：添加内边距样式 */
		border-radius: 5px;
	}
	.btn{
		margin-top: 25rpx;
	}
	.uni-list-cell-left{
		font-size: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>